<template>
    <div>
        <el-dialog center class="global-dialog" v-model="dialogVisable1" width="800px" top="10vh" :show-close="true"
            :close-on-click-modal="false" @close="close">
            <template #title>
                <div class="my-header"  v-loading="detail_loading">
                    <el-tabs v-model="tabId" class="demo-tabs" >
                        <el-tab-pane label="基本信息" name="4">
                            <el-form :model="diaForm" ref="DiaForm" :rules="rules" status-icon label-width="110px" status>
                                <el-row :gutter="20">
                                    <el-col :span="20">
                                        <el-form-item label="公开号" prop="publicCode"   >
                                            <el-input placeholder="请输入" v-model="diaForm.publicCode" style="width: 100%" maxlength="200"   show-word-limit  clearable/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                              <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="授权号" prop="grantCode"   >
                                            <el-input placeholder="请输入" v-model="diaForm.grantCode" style="width: 100%" maxlength="40" show-word-limit clearable/>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="申请号" prop="applyCode">
                                            <el-input placeholder="请输入" v-model="diaForm.applyCode" style="width: 100%"  maxlength="40" show-word-limit clearable />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="专利名称" prop="patentName">
                                            <el-input placeholder="请输入" v-model="diaForm.patentName" style="width: 100%"  maxlength="500" show-word-limit clearable />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="专利号" prop="patentId">
                                            <el-input placeholder="请输入" v-model="diaForm.patentId" style="width: 100%"  maxlength="200" show-word-limit   clearable  />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="公开日期" prop="publicDate">
                                            <el-date-picker v-model="diaForm.publicDate" type="date"
                                                value-format="YYYY-MM-DD" placeholder="请选择" clearable style="width: 100%"   />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="公告日期" prop="prDate">
                                            <el-date-picker v-model="diaForm.prDate" type="date"
                                                value-format="YYYY-MM-DD" placeholder="请选择" clearable style="width: 100%"   />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="优先权号" prop="permissionCode">
                                            <el-input placeholder="请输入" v-model="diaForm.permissionCode" style="width: 100%"  maxlength="50" show-word-limit   clearable  />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="优先权日" prop="priorityDate">
                                            <el-date-picker v-model="diaForm.priorityDate" type="date"
                                                        value-format="YYYY-MM-DD" placeholder="请选择" clearable style="width: 100%"   />
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="有效期(年)" prop="limitDate">
<!--                                            <el-input type="number" :min="1" placeholder="请输入" v-model="diaForm.limitDate" style="width: 100%"   maxlength="3" show-word-limit clearable   />-->
                                            <el-input type="number" :min="1" placeholder="请输入"
                                                      v-model="diaForm.limitDate" style="width: 100%"  maxlength="5"  show-word-limit  />
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="12">
                                        <el-form-item label="专利类型" prop="patentClassId">
                                            <el-select v-model="diaForm.patentClassId" placeholder="请选择" style="width: 100%"
                                                @change="changeLange"  clearable >
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in patentClassList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="20">
                                    <el-col :span="12">
<!--                                        <el-form-item label="法律状态" prop="lawStatusId">-->
                                        <el-form-item label="法律状态" >
                                            <el-select clearable v-model="diaForm.lawStatusId" placeholder="法律状态"
                                                @change="changeLawStatus" style="width: 100%">
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in lawStatusList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="12">
                                        <el-form-item label="法律事件" prop="lawEventId">
                                            <!-- <el-input placeholder="请输入" v-model="diaForm.pageNumber" style="width: 100%" /> -->
                                            <el-select clearable v-model="diaForm.lawEventId" placeholder="法律事件"
                                                @change="changeWorkAttribute" style="width: 100%"  >
                                                <el-option :label="item.itemText" :value="item.itemValue"
                                                    :key="item.itemValue" v-for="item in workAttributeList" />
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="引用次数" prop="referCount">
<!--                                            <el-input oninput="value=value.replace(/[^0-9]/g,'')" :min="1" placeholder="请输入" v-model="diaForm.referCount" style="width: 100%"  maxlength="5"  clearable   />-->
                                            <el-input type="number" :min="0" placeholder="请输入" v-model="diaForm.referCount" style="width: 100%"  maxlength="5"     />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="取得时间" prop="getEvent">
                                            <el-date-picker v-model="diaForm.getEvent" type="date"
                                                value-format="YYYY-MM-DD" placeholder="请选择" clearable style="width: 100%"  />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="申请日期" prop="birthdarDate">
                                            <el-date-picker v-model="diaForm.birthdarDate" type="date"
                                                value-format="YYYY-MM-DD" placeholder="请选择" clearable style="width: 100%"  />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="专利权人" prop="patentUserName">
                                            <el-input placeholder="请输入" v-model="diaForm.patentUserName" style="width: 100%"  maxlength="200"    show-word-limit  />
                                            <!-- <el-select clearable v-model="diaForm.patentUserId" placeholder="专利权人"
                                                @change="changeUnit" style="width: 100%">
                                                <el-option :label="item.name" :value="item.id"
                                                    :key="item.id" v-for="item in unitNameList" />
                                            </el-select> -->
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
<!--                                    <el-col :span="12">
                                        <el-form-item label="公开(公告)号" prop="publicCode">
                                            <el-input placeholder="请输入" v-model="diaForm.publicCode" style="width: 100%"  maxlength="200" show-word-limit  clearable   />
                                        </el-form-item>
                                    </el-col>-->
                                    <el-col :span="18">
                                        <el-form-item label="发明人" prop="inventor">
                                            <el-input placeholder="请输入" v-model="diaForm.inventor" style="width: 100%"  maxlength="200" show-word-limit  clearable   />
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="中国专利奖等级" prop="patentAwardLevel">
                                            <el-input placeholder="请输入" v-model="diaForm.patentAwardLevel" style="width: 100%"  maxlength="200" show-word-limit clearable    />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="地方专利奖项" prop="localPatentAwards">
                                            <el-input placeholder="请输入" v-model="diaForm.localPatentAwards" style="width: 100%"   maxlength="200" show-word-limit clearable   />
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-form-item label="原始申请人" prop="originalApply">
                                    <el-input placeholder="请输入" v-model="diaForm.originalApply" style="width: 100%"  maxlength="200" show-word-limit  clearable  />
                                </el-form-item>

                                <el-form-item label="IPC分类号" prop="ipcCode">
                                    <el-input v-model="diaForm.ipcCode" :autosize="{ minRows: 2, maxRows: 6 }"
                                        type="textarea" placeholder="请输入"  maxlength="100" show-word-limit  clearable />
                                </el-form-item>
                                <el-form-item label="外观设计分类号" prop="designClassCode">
                                    <el-input v-model="diaForm.designClassCode" :autosize="{ minRows: 2, maxRows: 6 }" type="textarea"
                                         placeholder="请输入"  maxlength="100"  show-word-limit clearable   />
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="编辑信息" name="1" >
                            <EditInformation ref="getMiddle" @valueFlag2="valueFlag2" :editInformationData="editInformationData" @changeEditInformation="changeEditInformation"></EditInformation>
                        </el-tab-pane>
                        <el-tab-pane label="标签信息" name="2" >
                            <Tag ref="getMiddle1" @changeTag="changeTag" @valueFlag2="valueFlag1" :tagData="tagData"></Tag>
                        </el-tab-pane>
                        <el-tab-pane label="附件信息" name="3" >
                            <PlatformFiles :files="files" @filesParams="filesParams"  download="KJSL:KJCG:ZL:DOWNLOAD"  upload="KJSL:KJCG:ZL:UPLOAD" fileDelete="KJSL:KJCG:ZL:FILEDELETE"></PlatformFiles>
                        </el-tab-pane>
                        <el-tab-pane label="变更记录" name="five" v-if="flag != 1">
                            <record :changeLogs="changeLogs"></record>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </template>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close">关闭</el-button>
                    <el-button type="primary" @click="save">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getDictionary, getProject, getUnit } from "@/views/science/api/academic";
import { addInformation, getDetailById, getUpdate, } from "@/views/science/api/patent";
import PlatformFiles from '@/views/science/components/platformFiles/platformFiles.vue';
import { default as Record, default as record } from '@/views/science/components/record/record.vue';
import { tips } from "@/views/science/components/tips/tips";
import { ElMessage } from 'element-plus';
import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
import EditInformation from './editInformation.vue';
import Tag from './tag.vue';

export default {
    components: { PlatformFiles, Record,EditInformation,Tag,record},
    props: {
        dialogVisable1: {
            type: Boolean,
            default: false,
        },
        // falg  1:新增  2:编辑  3:详情
        flag: {
            type: String,
            default: 1,
        },
        id: {
            type: String,
            default: '',
        }
    },
    setup(props, { emit }) {
        // 发送请求
        onMounted(() => {
            // 获取数据字典
            getCodeList()
            getUnitList();
            getProjectList()
        });

        let DiaForm = ref();
        let data = reactive({
            tabId:'4' ,
            patentClassList:[],//专利类型数据
            workLevelList: [],
            techClassList: [],
            languageList: [],
            RankingList: [],
            unitNameList:[],
            detail_loading:false,

            projectList: [],//项目
            lawStatusList:[],//法律状态
            workAttributeList: [],//法律事件
            flag1:1,

            memberList: [],
            unitList: [],
            yearList: [
                { itemText: '2023年', itemValue: '2026' },
                { itemText: '2023年', itemValue: '2025' },
                { itemText: '2023年', itemValue: '2024' },
                { itemText: '2022年', itemValue: '2022' },
                { itemText: '2021年', itemValue: '2021' },
                { itemText: '2020年', itemValue: '2020' },
                { itemText: '2019年', itemValue: '2019' }
            ],//年份
            //基本信息
            diaForm: {
                publicCode:"",
                patentId: "", //专利id
                grantCode: "", //授权号
                applyCode: "", //申请号
                patentName: "", //专利名称
                birthdarDate: "", //申请日期
                publicDate: "", //公开日期
                prDate: "", //公告日期
                permissionCode: "", //优先权号
                // patentUserId: " ", //专利权人id
                patentUserName: '', //专利权人名称
                limitDate: "", //有效期
                patentClassId: "", //专利类型id(KJSL_PATENT_TYPE)
                patentClass: "", //专利类型
                lawStatusId: "", //法律状态id(KJSL_LEGAL_STATUS)
                lawStatus: "", //法律状态
                lawEventId: "", //法律事件id(KJSL_SIMPLE_LEGAL_EVENTS)
                lawEvent: "", //法律事件
                referCount: "", //引用次数
                getEvent: "", //取得时间
                priorityDate: "", //优先权日
                originalApply: "", //原始申请人
                ipcCode: "", //IPC分类号
                designClassCode: "" //外观设计分类号
            },
            editInformationData:{},//编辑信息组件
            tagData:{},//标签信息组件
            files: [],
            changeLogs: [],
            flag1: null,
            flag2: null,
        });

        // 规则校验
        let rules = reactive({
          publicCode: [
                { required: true, message: '请输入公开号', trigger: 'blur' },
            ],
          grantCode: [
                { required: true, message: '请输入授权号', trigger: 'blur' },
            ],
            applyCode: [
                { required: true, message: '请输入申请号', trigger: 'change', },
            ],
            patentName: [
                { required: true, message: '请输入专利名称', trigger: 'change', },
            ],
            birthdarDate: [
                { required: true, message: '请选择申请日期', trigger: 'change', },
            ],
            publicDate: [
                { required: true, message: '请选择公开日期', trigger: 'change', },
            ],
            prDate: [
                { required: true, message: '请选择公告日期', trigger: 'change', },
            ],
            permissionCode: [
                { required: true, message: '请选择优先权号', trigger: 'change', },
            ],
            priorityDate: [
                { required: true, message: '请选择优先权日', trigger: 'change' },
            ],
            limitDate: [
                { required: true, message: '请选择有效期(年)', trigger: 'change' },
              { pattern: /^[1-9]\d{0,2}$/, message: '请输入三位正整数以内的数字' }
            ],
            patentClassId: [
                { required: true, message: '请选择专利类型', trigger: 'change' },
            ],
            lawStatusId: [
                { required: true, message: '请输入法律状态', trigger: 'change' },
            ],
            lawEventId: [
                { required: true, message: '请输入法律事件', trigger: 'change' },
            ],
            referCount: [
                { required: true, message: '请输入引用次数', trigger: 'change' },
            ],
            originalApply: [
                { required: true, message: '请输入原始申请人', trigger: 'change' },
            ],
            ipcCode: [
                { required: true, message: '请输入IPC分类号', trigger: 'change' },
            ],
            designClassCode: [
                { required: true, message: '请输入外观设计分类号', trigger: 'change' },
            ],
            patentId: [
                { required: true, message: '请输入专利号', trigger: 'change' },
            ],
            patentUserName: [
                { required: true, message: '请输入专利权人', trigger: 'change' },
            ],
            getEvent: [
                { required: true, message: '请输入取得时间', trigger: 'change' },
            ],
        });

        // 著作级别,编著属性,技术分类,语言,企业排名===>数据字典
        let getCodeList = () => {
            getDictionary(['KJSL_SIMPLE_LEGAL_EVENTS','KJSL_LEGAL_STATUS','KJSL_PATENT_TYPE','KJSL_ACADEMIC_WORK_LEVEL', 'KJSL_SOFT_STATE', 'KJSL_BUSINESS_SECTOR', 'KJSL_LANGUAGE', 'KJSL_ENTERPRISE_RANKING']).then((res) => {
                data.workLevelList = res.data.data.KJSL_ACADEMIC_WORK_LEVEL;
                // data.workAttributeList = res.data.data.KJSL_SOFT_STATE;
                data.techClassList = res.data.data.KJSL_BUSINESS_SECTOR;
                data.languageList = res.data.data.KJSL_LANGUAGE;
                data.RankingList = res.data.data.KJSL_ENTERPRISE_RANKING;

                data.patentClassList = res.data.data.KJSL_PATENT_TYPE;
                data.lawStatusList = res.data.data.KJSL_LEGAL_STATUS;
                data.workAttributeList = res.data.data.KJSL_SIMPLE_LEGAL_EVENTS;
            });
        };

        // 项目
        let getProjectList = () => {
            getProject({}).then((res) => {
                data.projectList = res.data.data;
            });
        };

        //编辑信息组件 数据传过来
        let changeEditInformation = (val) =>{
            // console.log('编辑信息组件 数据传过来',val);
            data.editInformationData = val
        }
        //标签信息组件 数据传过来
        let changeTag = (val) =>{
            // console.log('标签信息组件 数据传过来',val);
            data.tagData = val
        }

        const valueFlag2 = (flag) => {
           data.flag2 = flag
        }
        const valueFlag1 = (flag) => {
           data.flag1 = flag
        }
        const getMiddle = ref()
        const getMiddle1 = ref()

        // 保存
        let save = () => {
            DiaForm.value.validate((valid) => {
            if (valid) {
                // 校验通过
                    getMiddle.value.submitForm()
                    getMiddle1.value.submitForm()

                    console.log('data.flag2',data.flag2,data.flag1);
                    //校验其他页面的
                    if (!data.flag2) {
                        ElMessage({
                        message: '请将编辑信息补充完整',
                        type: 'warning',
                        })
                        return
                    }
                    //校验其他页面的
                    if (!data.flag1) {
                        ElMessage({
                        message: '请将标签信息补充完整',
                        type: 'warning',
                        })
                        return
                    }


                    if(props.flag == 1){
                        // console.log('新增',data.diaForm);
                        delete data.editInformationData.id;
                        let obj = {
                            info: data.editInformationData,
                            baseInfo:data.diaForm,
                            tag:data.tagData,
                            files:data.files,
                        }
                        addInformation(obj).then(res =>{
                            tips("新增成功", "success");
                            data.tagData = {};
                            data.diaForm = {};
                            getMiddle.value.clearForm();
                            getMiddle1.value.clearForm();
                            DiaForm.value.resetFields();
                            emit("changeDialog", '1');
                        })

                    }else{
                        let obj = {
                            info: data.editInformationData,
                            baseInfo:data.diaForm,
                            tag:data.tagData,
                            files:data.files,
                        }
                        getUpdate(obj).then(res =>{
                            console.log('编辑',res);
                            if(res.data.code == 200){
                                tips("编辑成功", "success");
                              data.tagData = {};
                              data.diaForm = {};
                              getMiddle.value.clearForm();
                              getMiddle1.value.clearForm();
                              DiaForm.value.resetFields();
                                emit("changeDialog", '1');
                            }
                        })
                    }
                }else{
                ElMessage({
                    message: '请将基本信息补充完整',
                    type: 'warning',
                    })
            }
            });

        }

        let filesParams = (params) => {
            data.files = params
        }

        // 单位
        let getUnitList = () => {
            getUnit({}).then((res) => {
                data.unitNameList = res.data.data;
            });
        };

        //著作级别
        let changeWorkLevel = (id) => {
            let itemText = data.workLevelList.find(item => item.itemValue == id).itemText
            data.diaForm.workLevel = itemText
        }
        //法律状态
        let changeLawStatus = (id) => {
            let itemText = data.lawStatusList.find(item => item.itemValue == id).itemText
            data.diaForm.lawStatus = itemText
        }

        // 法律事件
        let changeWorkAttribute = (id) => {
            let itemText = data.workAttributeList.find(item => item.itemValue == id).itemText
            data.diaForm.lawEvent = itemText
        }

        // 所属项目
        let changeProject = (id) => {
            let itemText = data.projectList.find(item => item.id == id).projectname
            data.diaForm.project = itemText
        }

        // 技术分类
        let changeTechClass = (id) => {
            let itemText = data.techClassList.find(item => item.itemValue == id).itemText
            data.diaForm.techClass = itemText
        }

        //   单位
        let changeUnit = (id) => {
            console.log('belongingUnit',data.unitNameList,id);
            let itemText = data.unitNameList.find(item => item.id == id).name
            data.diaForm.patentUserName = itemText
        }
        //专利类型
        let changeLange = (id) => {
            let itemText = data.patentClassList.find(item => item.itemValue == id).itemText
            data.diaForm.patentClass = itemText
        }

        // 通过详情查询id
        let getDetail = async (id) => {
            data.detail_loading = true
            let res = await getDetailById(id);
            data.diaForm = res.data.data.baseInfo
            data.editInformationData = res.data.data.info
            data.tagData = res.data.data.tag
            data.files = res.data.data.files
            data.changeLogs = res.data.data.changeLogs
            data.detail_loading = false
        };
        watch(() => props.dialogVisable1,() => {
                // console.log(props.id)
                // 深度监听.只有在id存在的时候调用详情的接口
                if (props.id) {
                    getDetail(props.id)
                }
            },
            { deep: true, immediate: true }
        );
        watch(() => props.flag,(newValue,oldValue) => {
            data.flag1 = newValue
            if(data.flag1 == 1){
                nextTick(() =>{
                    console.log('新增',getMiddle.value);
                    getMiddle.value.clearForm()
                    getMiddle1.value.clearForm()
                })
                data.editInformationData = {};
                data.tagData = {};
            }
            },{ deep: true, immediate: true }
        );

        // 关闭清除对话框里面的数据,附件.变更记录也要删除
        // tabId也要设置初始值,否则在电点击编辑record,新增打开会出现空白页
        let close = () => {
            data.tabId = '4';
            DiaForm.value.resetFields();
            data.files = [];
            data.editInformationData = {};
            data.tagData = {};
            data.diaForm = {};
            emit("changeDialog");
            getMiddle.value.clearForm()
            getMiddle1.value.clearForm()
        };

        return {
            DiaForm,
            filesParams,
            rules,
            changeWorkLevel,
            changeWorkAttribute,
            changeLawStatus,
            changeProject,
            changeTechClass,
            getUnitList,
            changeUnit,
            changeLange,
            getProjectList,
            getCodeList,
            ...toRefs(data),
            close,
            save,
            changeEditInformation,
            changeTag,
            getDetail,
            valueFlag1,
            valueFlag2,
            getMiddle,
            getMiddle1,
        };
    },
};
</script>

<style scoped lang="scss">
.dialog-footer {
    display: flex;
    justify-content: end;
}

:deep(.el-dialog__body) {
    display: none;
}

// 滚动条
:deep(.demo-tabs > .el-tabs__content) {
    max-height: 500px;
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.el-select{
    margin: 0;
}
</style>
